<template>
	<view class="container">
		<image src="/static/hezuo.jpg" mode="widthFix" class="bg"></image>
		<view class="content">
			<view class="infor-item">
				<view class="title">姓名：</view>
				<input type="text" v-model="name" placeholder="请输入客户姓名" />	
			</view>
			<view class="infor-item">
				<view class="title">电话：</view>
				<input type="text" v-model="mobile" placeholder="请输入客户电话" />	
			</view>
			<view class="infor-item">
				<view class="title">城市：</view>
				<input type="text" v-model="city" placeholder="请输入客户城市" />	
			</view>
			<view class="infor-item">
				<view class="title">业务：</view>
				<input type="text" v-model="distribute" placeholder="请输入您的主营业务" />	
			</view>
			<view class="rule-wrapper">
				<image src="/static/rule.png" class="icon"></image>
				<view class="text">我已阅读并同意魔利购的<view class="rule" @click="popup">用户协议</view></view>
			</view>
			<button type="default" :disabled="flag" class="bottom-btn" @click="submit">立即申请</button>
		</view>	
		<view class="popup" :hidden="show">
			<view class="popupTitle">
				魔利购小程序用户协议
			</view>
			<view class="popupText">
				为使用魔利购小程序服务（以下简称“本服务”或“小程序服务”），您应当阅读并遵守《魔利购小程序用户协议》，请务必审慎阅读、充分理解各条款内容，特别是免除或限制责任的相应条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。
				除非您已阅读并接受本条款所有条款，否则您无权使用魔利购小程序服务。您对本服务的登录、查看、发布信息等行为即视为已阅读并同意本条款的约束。
				如果您未满18周岁，请在法定监护人的陪同下阅读本协议，并特别注意未成年人使用条款。
			</view>
			<view class="popupText">
				    一、协议的范围
			</view>
			<view class="popupText">
				    1.1 本条款是用户（以下简称“您”）与魔利购小程序）之间关于用户使用小程序服务所订立的协议。“用户”是指注册、登录、使用小程序的个人或组织；“其他用户”是指包括其他小程序用户、公众账号用户和普通用户等除您本人外与小程序服务相关的用户。
			</view>
			<view class="popupText">
				    1.2 本服务是指魔利购根据本协议向您提供的服务。我们会不断丰富您使用本服务的终端、形式等，如您已注册使用一种形式的服务，则可以以同一账号使用其他服务，本协议自动适用于您对所有版本的软件和服务的使用。
			</view>
			<view class="popupText">
				    1.3 提供本服务的小程序所有权和全部使用权均归魔利购所有，您开通后仅授权使用部分功能，具体以产品展示的为准。
			</view>
			<view class="popupText">
				    1.4 小程序属于公众账号，在不与本协议冲突的情况下，您应遵守《相关平台服务协议》、《软件许可及服务协议》 等关于账号的其他相关规定。
			</view>
			<view class="popupText">
				   1.5 本协议内容包括本协议正文及所有我们已经发布或将来可能发布的隐私权政策、各项政策、规则、声明、通知、警示、提示、说明（以下统称为“用户规则”）。前述用户规则为本协议不可分割的补充部分，与本协议具有同等法律效力。如您使用魔利购产品及服务，视为您同意上述补充部分。
			</view>
			<view class="popupText">
				   二、小程序注册与审核
			</view>
			<view class="popupText">
				    2.1 账号注册
			</view>
			<view class="popupText">
				    2.1.1 您在使用本服务前需要先进行授权和认证。您确认，在您开始授权使用魔利购产品及服务前，您应当是具备完全民事权利能力和与所从事的民事行为相适应的行为能力的自然人、法人或其他组织。若您不具备前述主体资格，请勿使用服务，否则您及您的监护人应承担因此而导致的一切后果，且我们有权注销（永久冻结）您的账户，并向您及您的监护人索偿。
			</view>
			<view class="popupText">
				    2.1.2 当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，您可获得魔利购平台账户并成为产品用户，即有权使用魔利购平台并获得相应服务。魔利购平台只允许每位用户使用一个主账户，但您可以在授权范围内获得多个子账号。
			</view>
			<view class="popupText">
				    2.1.3 该账户是您通过魔利购平台寻求并获得服务的唯一有效身份证明，请您妥善保管账号和密码。为使您更好地使用魔利购平台的各项服务，保障您的账户安全，本公司可要求您按本协议、用户规则及我国法律规定完成实名认证。
			</view>
			<view class="popupText">
				    2.1.4 为维护小程序的健康运营，您应当准确完整地提供您的最新信息（包括您的名称及电子邮件地址、联系电话、联系地址等）。并且您承诺，在使用本服务的过程中提交和发布的信息均是真实、合法的，因不实信息导致魔利购或者第三方合法权益受损的，由您独立承担全部责任。
			</view>
			<view class="popupText">
				    2.2 账号安全
			</view>
			<view class="popupText">
				    2.2.1 在您成功注册后，我们将根据您的身份要素识别您的身份和授权登录。“身份要素”包括但不限于您的账户名称、密码、短信校验码、手机号码、身份证件号码及人脸信息、眼纹信息。您同意基于不同的终端以及您的使用习惯，我们可能采取不同的验证措施识别您的身份。
			</view>
			<view class="popupText">
				    2.2.2 如您发现账号遭他人非法使用，应立即通知本公司。因黑客行为或您自身保管疏忽导致账号、密码遭他人非法使用所发生的一切责任，均应由您本人承担，本公司不承担任何责任。
			</view>
			<view class="popupText">
				    2.2.3 您授权或注册成功后，魔利购将给予您一个帐号，并由您自行设置相应密码，任何该账户项下的预订及支付等行为均视为您本人的操作。您应对您账户项下的所有行为结果（包括但不限于授权、绑定、结算）负责。
			</view>
			<view class="popupText">
				    三、服务及规范
			</view>
			<view class="popupText">
				   3.1 服务内容
			</view>
			<view class="popupText">
				    3.1.1 本服务内容包含商品购买、服务预订、售货机产品购买等技术功能，这些功能服务可能根据用户需求的变化，随着因服务版本不同、或服务提供方的单方判断而被优化或修改，或因定期、不定期的维护而暂缓提供。
			</view>
			<view class="popupText">
				    3.1.2 魔利购有权自行决定对服务或服务任何部分及其相关功能、应用软件进行变更、升级、修改、转移，并有权决定以适当的方式进行公示或通知。
			</view>
			<view class="popupText">
				   3.2 服务费用
			</view>
			<view class="popupText">
				    3.2.1 魔利购平台向您提供的服务目前是免费的。我们保留日后就程序及或服务向您收费的权利。如果我们决定收取此类费用，我们会采取合理途径并以足够合理的期限提前通过法定程序并以本协议约定的方式通知您，确保您有充分选择的权利。
			</view>
			<view class="popupText">
				    3.2.2 您在使用小程序的过程中与第三方发生的费用结算，魔利购仅为您使用小程序服务提供技术支持，本协议的签署不代表魔利购成为您在平台商户项下支付过程中的参与者。魔利购不对基于服务而产生的任何行为担保、许可或向任何第三人承担共同责任。
			</view>
			<view class="popupText">
				    3.3 服务使用规则
			</view>
			<view class="popupText">
				    3.3.1 您在本服务中或通过本服务所传送、发布的任何内容并不反映或代表，也不得被视为反映或代表魔利购的观点、立场或政策，魔利购对此不承担任何责任。
			</view>
			<view class="popupText">
				    3.3.2 您不得利用魔利购账号或本服务进行如下行为：
			</view>
			<view class="popupText">
				    (1) 提交、发布虚假信息，或盗用他人头像或资料，冒充、利用他人名义的；
			</view>
			<view class="popupText">
				    (2) 强制、诱导其他您关注、点击链接页面或分享信息的；
			</view>
			<view class="popupText">
				    (3) 虚构事实、隐瞒真相以误导、欺骗他人的；
			</view>
			<view class="popupText">
				    (4) 利用技术手段批量建立虚假账号的；
			</view>
			<view class="popupText">
				   (5) 利用平台账号或本服务从事任何违法犯罪活动的；
			</view>
			<view class="popupText">
				   (6) 制作、发布与以上行为相关的方法、工具，或对此类方法、工具进行运营或传播，无论这些行为是否为商业目的；
			</view>
			<view class="popupText">
				   (7) 其他违反法律法规规定、侵犯其他您合法权益、干扰魔利购正常运营或魔利购未明示授权的行为。
			</view>
			<view class="popupText">
				   3.3.3 魔利购有权查阅您的注册、交易数据及交易行为，如发现可能存在违反法律法规、本协议或相关规则的情形或其他任何问题，魔利购有权直接做出其认为合理的处理，包括但不限于通知修改、删除相关信息，停止被协议项下的服务内容等。前述约定不代表魔利购应对您的行为承担任何连带责任，您应对此产生的法律责任独立负责。
			</view>
			<view class="popupText">
				   四、法律责任
			</view>
			<view class="popupText">
				  4.1 用户责任
			</view>
			<view class="popupText">
				4.1.1您应遵守平台中关于“法律责任”的约定，除非该等约定与本协议存在冲突。
			</view>
			<view class="popupText">
				  4.1.2 如果我们发现或收到他人举报或投诉您违反本协议约定的，我们有权不经通知随时对相关内容，包括但不限于对您的资料、聊天记录进行审查、删除，并视情节轻重对违规账号处以包括但不限于警告、账号封禁、设备封禁、功能封禁的处罚，且通知您处理结果。
			</view>
			<button type="default" :disabled="btnFlag" class="popupBtn" @click="handleClick">我已阅读并同意{{time?'('+time+')':''}}</button>
		</view>
	</view>
</template>

<script>
	import { apply } from '@/api/other.js'
	export default {
		data() {
			return {
				name: '',
				mobile: '',
				city: '',
				distribute: '',
				flag: false,
				show:true,
				btnFlag:true,
				time:0
			}
		},
		onLoad() {
		},
		onShow() {
		},
		methods: {
			popup(){
				this.show=false
				this.btnFlag=true
				this.time=3
				let timer=setInterval(()=>{
				this.time -=1	
				if(this.time===0){
					clearInterval(timer)
					this.btnFlag=false
				}
				},1000)
			},
			handleClick(){
				this.show=true
			},
			submit() {
				if (!this.name) {
					uni.showToast({
						title: '请输入客户姓名',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.mobile) {
					uni.showToast({
						title: '请输入客户电话',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.city) {
					uni.showToast({
						title: '请输入客户城市',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.distribute) {
					uni.showToast({
						title: '请输入您的主营业务',
						icon: 'none',
						duration: 2000
					})
					return
				}
				const data = {
					name: this.name,
					mobile: this.mobile,
					city: this.city,
					distribute: this.distribute
				}
				console.log(data, 'data')
				this.flag = true
				apply(data).then(respanse => {
					uni.showToast({
						title: '提交成功！',
						icon: 'success',
						duration: 2000
					})
					this.flag = false
					this.name = ''
					this.mobile = ''
					this.city = ''
					this.distribute = ''
				}).catch(err => {
					this.flag = false
				})
			}
		}
	}
</script>
<style>
	body{
		background-color: #f09e76;
	}
</style>
<style lang="scss" scoped>
	.container{
		position: relative;
	}
	.bg{
		display: block;
		width: 100%;
	}
	
	.popup{
		position: fixed;
		top: 50rpx;
		left: 25rpx;
		width: 620rpx;
		height: 1120rpx;
		padding: 20rpx 40rpx 80rpx;
		overflow: auto;
		background-color:#fff;
		z-index: 99;
		.popupTitle{
			padding: 10rpx 0;
			width: 100%;
			text-align: center;
			font-size: 36rpx;
		}
		.popupText{
			padding: 10rpx 0;
			line-height: 50rpx;
		}
		.popupBtn{
			position: fixed;
			left: 75rpx;
			bottom: 187rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 26rpx;
			color: #fff;
			background: linear-gradient(-90deg, #ED602B, #F19136);
			border-radius: 40rpx;
		}
	}
	.content{
		position: relative;
		padding: 34rpx 28rpx 67rpx;
		margin: -10rpx 30rpx 0;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		.infor-item{
			display: flex;
			margin-top: 24rpx;
			height: 80rpx;
			box-sizing: border-box;
			border: 1px solid #DCDCDC;
			border-radius: 40rpx;
			.title{
				padding-left: 39rpx;
				width: 171rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				font-size: 26rpx;
				color: #333333;
			}
			input{
				flex: 1;
				display: block;
				width: 100%;
				height: 80rpx;
				font-size: 26rpx;
				color: #333333;
			}
		}
		.rule-wrapper{
			display: flex;
			align-items: center;
			margin-top: 47rpx;
			.icon{
				width: 25rpx;
				height: 25rpx;
			}
			.text{
				flex: 1;
				margin-left: 7rpx;
				line-height: 32rpx;
				font-size: 22rpx;
				color: #999999;
				.rule{
					display: inline-block;
					vertical-align: top;
					color: #F09D75;
				}
			}
		}
	}
	.bottom-btn{
		margin-top: 22rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 26rpx;
		color: #fff;
		background: linear-gradient(-90deg, #ED602B, #F19136);
		border-radius: 40rpx;
	}
</style>
